<template>
  <div class="splitScreen">
    <div class="closeBox" @click="reduceValue"><i class="el-icon-close"></i></div>
    <el-form-item :label="$t('screen.splitScreenName')+' :'">
      <el-input v-model="screen_name" @change="changeValue"></el-input>
    </el-form-item>
    <el-form-item :label="$t('screen.splitScreenSize')+' :'">
      <el-input v-model="screen_show_size" @change="changeValue"></el-input>
    </el-form-item>
    <el-form-item :label="$t('screen.splitScreenValue')+' :'">
      <el-input v-model="screen_value" @change="changeValue"></el-input>
    </el-form-item>
    <el-form-item :label="$t('screen.splitScreenResource')+' :'">
      <el-checkbox-group v-model="screen_play_type" @change="changeValue">
        <el-checkbox label="1">图片</el-checkbox>
        <el-checkbox label="2">视频</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "SplitScreen",
  props: {
    idx: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ""
    },
    show_size: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    play_type: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      screen_name: "",
      screen_show_size: "",
      screen_value: "",
      screen_play_type: "",
      screen_idx: ""
    };
  },
  watch: {
    idx: {
      handler: function(val, oldval) {
        this.screen_name = this.name;
        this.screen_show_size = this.show_size;
        this.screen_value = this.value;
        this.screen_play_type = this.play_type;
        this.screen_idx = this.idx;
      },
      deep: true,
      immediately: true
    }
  },
  mounted() {
    this.screen_name = this.name;
    this.screen_show_size = this.show_size;
    this.screen_value = this.value;
    this.screen_play_type = this.play_type;
    this.screen_idx = this.idx;
  },
  methods: {
    changeValue() {
      this.$emit(
        "getScreen",
        this.screen_name ? this.screen_name : "",
        this.screen_show_size ? this.screen_show_size : "",
        this.screen_value ? this.screen_value : "",
        this.screen_play_type ? this.screen_play_type : "",
        this.idx
      );
    },
    reduceValue() {
      this.$emit(
        "reduceScreen",
        this.idx
      );
    }
  }
};
</script>
<style scoped>
.splitScreen {
  border: 1px solid #ccc;
  padding-top: 20px;
  margin-bottom: 20px;
  position: relative;
}
.splitScreen .closeBox{
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.splitScreen .closeBox:hover{
    color: #ccc
}
</style>
